<template>
  <div class="example-index">
    <div class="example-index-inner">
      <!-- 头部 -->
      <ExampleIndexHeader @manage="handleManage" />
      <!-- 弹窗 -->
      <ExampleIndexDialog v-model="dialogVisible" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import ExampleIndexHeader from './components/example-index-header.vue';
import ExampleIndexDialog from './components/example-index-dialog.vue';

defineOptions({
  name: 'ExampleIndex',
  meta: {
    title: '示例首页',
    parent: {
      title: '示例'
    }
  }
});

const dialogVisible = ref<boolean>(false);

const handleManage = () => {
  dialogVisible.value = true;
};
</script>

<style lang="scss" scoped>
.example-index {
  box-sizing: border-box;
  height: 100%;
  user-select: none;
  background: #000;

  .example-index-inner {
    background: #0b0c20;
  }
}
</style>
